<template>
  <div
    :class="[
      'home-button-container',
      { 'home-button-container_disabled': disabled },
    ]"
    @mouseenter="showTooltip = true"
    @mouseleave="showTooltip = false"
  >
    <div
      class="home-button-text"
      @click="
        () => {
          if (props.disabled) {
            return
          }
          emit('click')
        }
      "
    >
      {{ text }}
      {{ props.number ? `(${props.number})` : '' }}
    </div>

    <div
      v-if="props.split"
      class="split-btn"
      @click="emit('click', { split: true })"
    >
      拆除
    </div>

    <div v-if="showTooltip && props.tooltip" class="tooltip">
      <div v-if="props.tooltip.desc" class="tooltip-desc">
        {{ props.tooltip.desc }}
      </div>
      <div v-if="props.tooltip.depend" class="tooltip-desc-details">
        <div
          class="details-item"
          v-for="(detail, index) in dependDetails"
          :key="index"
        >
          <div class="name">{{ detail.name }}</div>
          <div :style="{ display: 'flex' }">
            <div :class="['value', { value_lack: detail.isLack }]">
              {{ myToFixed(detail.value, 2) }}
            </div>
            <div v-if="detail.max" class="max_lack">/ {{ detail.max }}</div>
          </div>
        </div>
      </div>
      <div v-if="props.tooltip.descDetails" class="tooltip-effect">
        <div
          class="tooltip-effect-item"
          v-for="(effect, index) in props.tooltip.descDetails"
          :key="index"
        >
          {{ effect }}
        </div>
      </div>
      <div v-if="props.tooltip.note" class="tooltip-note">
        —{{ props.tooltip.note }}
      </div>
    </div>

    <slot name="next"></slot>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import type { HomeFunTooltip } from '@/types/homeFun'
import { useResourcesStore } from '@/store'
import { myToFixed } from '@/utils'

const props = defineProps<{
  text: string
  disabled?: boolean
  number?: number
  split?: boolean
  tooltip?: HomeFunTooltip
}>()
const emit = defineEmits(['click'])

const resourcesStore = useResourcesStore()

const showTooltip = ref(false)

const dependDetails = computed(() => {
  if (!props.tooltip?.depend) {
    return []
  }
  let rs = []
  for (const detail of props.tooltip?.depend) {
    const _v = resourcesStore.data[detail.id]
    if (_v) {
      const isLack = _v.details.value < detail.use
      rs.push({
        name: _v.details.name,
        value: !isLack ? detail.use : _v.details.value,
        isLack: isLack,
        max: isLack ? detail.use : null,
      })
    }
  }
  return rs
})
</script>
<style lang="less" scoped>
.home-button-container {
  width: 264px;
  height: 40px;
  line-height: 40px;
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: solid 1px rgb(184, 117, 58);
  border-radius: 3px;
  position: relative;

  .home-button-text {
    flex: 1;
    color: #dcdcdc;
    font-size: 15px;
    text-align: center;
  }

  &:hover {
    border: solid 1px orange;
    background-color: #222222;
  }

  .split-btn {
    width: 45px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    cursor: pointer;
    border-left: solid 1px rgba(255, 255, 255, 0.5);

    &:hover {
      color: #dcdcdc;
    }
  }

  .tooltip {
    position: absolute;
    top: -15px;
    left: 280px;
    width: 300px;
    background-color: rgba(34, 34, 34, 0.95);
    border: 1px solid rgb(184, 117, 58, 0.3);
    border-radius: 3px;
    padding: 0 10px;
    z-index: 100;
    color: #dcdcdc;
    font-size: 14px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

    .tooltip-desc {
      margin-bottom: 0px;
      color: rgba(255, 255, 255, 0.7);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      text-align: center;
    }

    .tooltip-desc-details {
      padding: 5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);

      .details-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        font-size: 16px;
        height: 26px;

        .name {
          color: #fff;
        }

        .value {
          color: #fff;
        }
        .value_lack,
        .max_lack {
          color: red;
        }
      }
    }

    .tooltip-effect {
      margin-bottom: 2px;

      .tooltip-effect-item {
        font-size: 13px;
        color: rgba(220, 220, 220, 0.75);
        height: 22px;
      }
    }

    .tooltip-note {
      font-style: italic;
      text-align: right;
      color: rgba(220, 220, 220, 0.5);
      font-size: 12px;
    }
  }
}

.home-button-container_disabled {
  cursor: not-allowed;
  color: #565656;
  border: solid 1px rgba(184, 117, 58, 0.65);

  .home-button-text {
    color: #565656;
  }

  &:hover {
    border: solid 1px rgba(184, 117, 58, 0.65);
    background-color: unset;
  }
}
</style>
